﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>采购入库</title>
    <script src="/Apm/js/CMSList.js"></script>
    <style>
        .page {
            height: 100%;
            display: flex;
        }
        .page-left {
            width: 18rem;
            background-color: #d2d2d2;
            overflow-y: auto;
        }

        .content-list {
            display: flex;
            flex-direction:column;
            padding: 0.5rem;
        }

            .content-list label {
                font-family: '楷体';
                font-size: 1rem;
                font-weight: bold;
                padding: 0.2rem;
            }
        .content-list span {
            font-family: '楷体';
            font-size: 1rem;
            padding:  0.2rem;
        }
        .content-info {
            display: flex;
            flex-direction: row;
            padding: 0.2rem;
        } 
        .page-li {
            background-color: #f2f2f2;
            border-bottom: solid #fff 2px;
        }

        .page-this {
            background-color: #5FB878;
        }

        .page-right {
            
            overflow-y: auto;
            width: calc(100% - 18rem);
        }
        iframe {
            border: 0;
            width: 100%;
            height: 100%;
        }
        .content{
            height:calc(100% - 5rem);
        }
    </style>
</head>
<body>
    <div class="page">
        <!--begin 左侧列表-->
        <div class="page-left">
            <ul id="PurchaseList" >
                <!--<li id="00001" class="page-li page-this">
                    <div class="content-list">
                        <div class="content-info">
                            <label>采购单号：</label><span>CG15166844576313</span>
                        </div>
                        <div class="content-info">
                            <label>采购标题：</label><span>2018年01月23日</span>
                        </div>
                        
                    </div>
                </li>
                <li class="page-li">
                    <div class="content-list">
                        <div class="content-info">
                            <label>采购单号：</label><span>CG15166844576313</span>
                        </div>
                        <div class="content-info">
                            <label>采购标题：</label><span>2018年01月23日</span>
                        </div>
                    </div>
                </li>-->


            </ul>
        </div>
        <!--end-->
        <!--begin 右侧内容-->
        <div class="page-right">
            <div class="toolsbar">
                <button id="AddStorage" class="layui-btn">
                    <i class="layui-icon">&#xe62a;</i> 采购入库
                </button>
                
            </div>
            <div class="content">
                <iframe id="purchaseinfo" src=""></iframe>
            </div>
        </div>
        <!--end-->
    </div>

</body>
</html>
<script>

    layui.use('layer', function () {
        var layer = layui.layer;

        BindData();
        //新增采购入库
        $("#AddStorage").click(function () {

            var purchaseguid = $("#purchaseinfo").attr('data-guid');
            layer.open({
                title: '采购入库',
                type: 2,
                area: ['600px', '80%'],
                content: '/FlowerManage/Storage/StorageEdit.html?type=add&PurchaseGuid=' + purchaseguid,
                end: function () {
                    BindData();
                }
            });
        })
        
    });
    function Clickli(id) {
        $("#PurchaseList li").removeClass("page-this");
        $("#" + id + "").addClass("page-this");
        PurchaseInfoData(id);
    }
    /**
     * 对应采购详单数据
     * @param guid
     */
    function PurchaseInfoData(guid) {
        $("#purchaseinfo").attr('src', '/FlowerManage/Purchase/PurchaseInfoView.html?guid=' + guid);
        $("#purchaseinfo").attr('data-guid', guid);
    }

    /**
     * 初始化数据
     */
    function BindData() {
        $("#PurchaseList").empty();
        layui.use('flow', function () {
            var flow = layui.flow;

            //流加载
            var pageSize = 15;//初始化默认显示15条
            ajaxget({
                url: 'api/FriendFlower/PurchaseListNotk?Token=' + MyPublic.getToken(),
                success: function (data) {
                    if (data == null) {
                        return;
                    }
                    var pagetotal = Math.ceil(data.length / pageSize);//总页数


                    flow.load({
                        elem: '#PurchaseList',
                        isLazyimg: false,//关闭图片懒加载
                        done: function (page, next) {
                            var lis = [];
                            for (var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {

                                //组合html
                                if (index === 0) {
                                    lis.push('<li id="' + data[index].Guid + '" onclick="Clickli(this.id)" class="page-li page-this">');
                                }
                                else {
                                    lis.push('<li id="' + data[index].Guid + '" onclick="Clickli(this.id)" class="page-li">');
                                }
                                lis.push('<div class="content-list">');
                                lis.push('<div class="content-info">');
                                lis.push(' <label>采购单号：</label><span>' + data[index].Guid + '</span>');
                                lis.push(' </div>');
                                lis.push('<div class="content-info">');
                                lis.push('<label>采购标题：</label><span>' + data[index].Title + '</span>');
                                lis.push(' </div>');
                                lis.push(' </div>');
                                lis.push(' </li>');

                            }

                            next(lis.join(''), page < pagetotal);
                        }
                    });

                    //初始化加载采购详单
                    var id = data[0].Guid;
                    PurchaseInfoData(id);


                }
            })
        });
    }
    
</script>